<template>
  <div class="container">
    <div class="login">
      <div class="login-form">
        <!-- logo -->
        <div class="logo"></div>
        <!-- 登录表单 -->
        <el-form
          :model="adminData"
          :rules="rules"
          status-icon
          ref="ruleForm"
          class="login-form-inner"
        >
          <!-- prop: 指定错误提示消息的显示位置, prop属性的值需要和表单元素绑定的数据保持一致 -->
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="adminData.username"
              autocomplete="off"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="adminData.password"
              autocomplete="off"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-login"
              round
              type="primary"
              @click="submitForm"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 和表单元素进行双向数据绑定
      adminData: {
        username: "admin",
        password: "admin888",
      },
      // 表单校验规则
      rules: {
        // required: 表示是必填项, message: 错误提示消息, trigger: 表单校验触发时机
        username: {
          required: true,
          message: "请输入登录账号",
          trigger: "blur",
        },
        password: {
          required: true,
          message: "请输入登录账号",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    // 表单提交方法
    submitForm() {
      // validate是el-form组件的一个系统方法, 作用是进行表单校验
      // valid: 系统自动注入的参数, true表示表单校验通过, false表示表单校验未通过
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 发送数据请求
          this.$axios.post("/userlogin", this.adminData).then((res) => {
            if (res.code === 200) {
              //  1-将登录相关信息写入本地存储localStorage中
              localStorage.setItem("adminInfo", JSON.stringify(res.list));
              // 2-成功提示(完整引入element-ui组件库)
              this.$message.success(res.msg);
              // 3-自动跳转到管理中心页面
              this.$router.push("/");
            }else{
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/common.css");
.container {
  width: 100%;
  min-width: 1366px;
  height: 100vh;
  min-height: 600px;
  background: linear-gradient(to bottom, #ff674b, #ff7a68);
}
.login {
  position: relative;
  height: 100%;
  width: 1000px;
  margin: 0 auto;
  background: url("../assets/imgs/loginbg.png") no-repeat center center;
  background-size: contain;
}
.login-form {
  position: absolute;
  top: 80px;
  right: 150px;
  width: 380px;
  height: 500px;
  /* background: olivedrab; */
}
.logo {
  height: 120px;
  width: 100%;
  background: url("../assets/imgs/logo.png") no-repeat center center;
  background-size: 100%;
}
/* 登录按钮 */
.btn-login {
  width: 100%;
  background: #ff674b;
}
.btn-login.el-button--primary {
  border: none;
}
.login-form-inner {
  margin-top: 80px;
}
</style>